.content{
	width: 100%;
	height: 10.8rem;
	background-image: url(../images/bg.jpg);
	background-size: 100% 100%;
	.main-content{
		display: flex;
		width: 100%;
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 0 .2rem;
		.right-panel{
				width: 5.41rem;
				background-image: url(../images/icon_05.png);
				height: 9.64rem;
				background-size: 100% 100%;
				.live-container{
					width: 100%;
					height: 100%;
					position: relative;
					padding: .58rem .28rem 0 .26rem;
					.live-banner{
						width: 100%;
						height: 9rem;
						img{
							display: block;
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					.live-stream{
						width: 100%;
						height: 4.35rem;
						img{
							display: block;
							width: 100%;
							height: 100%;
							object-fit: cover;
						}
					}
					.live-comments{
						width: calc(100% - .28rem - .26rem);
						position: absolute;
						left: .26rem;
						bottom: .3rem;
						.comment-item{
							display: block;
							background: rgba(0,0,0,.4);
							border-radius: .4rem;
							margin-top: .1rem;
							padding: .04rem .2rem;
							max-width: 4.38rem;
							margin-left: .14rem;
							line-height: 1.6;
							font-size: .16rem;
							color: #fff;
							&.on{
								color: #00fcff;
							}
							&.on1{
								color: #ff9933;
							}
						}
					}
				}
			}
		.center-panel{
			width: 7.51rem;
			.map-area{
				width: 100%;
				height: 5.46rem;
				position: relative;
				.map-container{
					width: 100%;
					height: 100%;
					position: relative;
				}
			}
			.recommendations{
				width: 100%;
				height: 3.12rem;
				background-image: url(../images/icon_20.png);
				background-size: 100% 100%;
				padding: .58rem 0 0 0;
				position: relative;
				.recommendation-table{
					width: 100%;
					.table-header{
						width: 100%;
						height: .4rem;
						background: rgba(255,255,255,0.1);
						display: flex;
						align-items: center;
						span{
							font-size: .16rem;
							font-weight: bold;
							color: #fff;
							display: flex;
							align-items: center;
							justify-content: center;
							&:nth-child(1){
								width: 1.1rem;
							}
							&:nth-child(2){
								width: 4.1rem;
							}
							&:nth-child(3){
								width: calc(100% - 5.2rem);
							}
						}
					}
					.table-body{
						width: 100%;
						.mySwiper{
							overflow: hidden;
							width: 100%;
							height: 2rem;
						}
						.table-row{
							height: .4rem;
							width: 100%;
							background: rgba(255,255,255,0.04);
							display: flex;
							border-bottom: 1px dashed rgba(255,255,255,0.18);
							align-items: center;
							.col-time{
								width: calc(100% - 5.2rem);
								text-align: center;
								font-size: .16rem;
								color: #fff;
							}
							&:nth-child(2){

							}
							.col-rank{
								width: 1.1rem;
								display: flex;
								align-items: center;
								justify-content: center;
								height: 100%;
								img{
									width: .2rem;
								}
							}
							.col-title{
								width: 4.1rem;
								font-size: .16rem;
								color: #fff;
								padding-left: .22rem;
								overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
							}
						}
					}
				}
			}
			.top-cards{
				display: flex;
				justify-content: space-between;
				.card{
					width: 3.39rem;
					height: 1.04rem;
					background-image: url(../images/icon_03.png);
					background-size: 100% 100%;
					padding: .46rem 0 0 0;
					&.daily-active{
						background-image: url(../images/icon_11.png);
					}
					div{
						text-align: center;
						font-size: .38rem;
						color: #fff;
					}
				}
			}
		}
		.left-panel{
			width: 5.4rem;
			.browse-stats{
				width: 100%;
				height: 3.12rem;
				background-image: url(../images/icon_18.png);
				background-size: 100% 100%;
				padding: .42rem 0 0 .15rem;
				margin-top: .2rem;
				position: relative;
				.browse-chart{
					width: 100%;
					height: 100%;
					.chart-content{
						width: 100%;
						height: 100%;
					}
				}
				.publish-tabs{
					display: flex;
					align-items: center;
					position: absolute;
					right: .16rem;
					height: .4rem;
					top: 0;
					span{
						font-size: .14rem;
						cursor: pointer;
						margin-right: .2rem;
						color: #fff;
						&.active{
							color: #fde517;
							font-size: .16rem;
							font-style: italic;
						}
					}
				}
			}
			.publish-stats{
				width: 100%;
				height: 2.9rem;
				background-image: url(../images/bbbs.png);
				background-size: 100% 100%;
				padding: .42rem 0 0 .15rem;
				margin-top: .2rem;
				position: relative;
				.publish-tabs{
					display: flex;
					align-items: center;
					position: absolute;
					right: .16rem;
					height: .4rem;
					top: 0;
					span{
						font-size: .14rem;
						cursor: pointer;
						margin-right: .2rem;
						color: #fff;
						&.active{
							color: #fde517;
							font-size: .16rem;
							font-style: italic;
						}
					}
				}
				.publish-data{
					overflow: hidden;
					display: flex;
					align-items: center;
					justify-content: space-between;
					.publish-chart{
						width: calc(100% - 2.28rem);
						height: 2.38rem;
						#main3{
							width: 100%;
							height: 100%;
						}
					}
					.fl{
						overflow: hidden;
						width: 2.28rem;
						.publish-main{
							width: 2.28rem;
							height: .92rem;
							background-image: url(../images/icons_10.png);
							background-size: 100% 100%;
							padding: .18rem 0 0 0;
							margin-top: .2rem;
							&:last-child{
								margin-bottom: 0;
							}
							.today-publish{
								display: flex;
								align-items: center;
								font-size: .16rem;
								justify-content: center;
								color: #fff;
								span{
									font-size: .22rem;
									color: #fff;
								}
							}
							.publish-increase{
								display: flex;
								align-items: center;
								justify-content: center;
								margin-top: .1rem;
								font-size: .15rem;
								color: #ff5634;
								img{
									width: .1rem;
									margin-left: .06rem;
								}
							}
              .publish-decrease{
                display: flex;
                align-items: center;
                justify-content: center;
                margin-top: .1rem;
                font-size: .15rem;
                color: #4fff34;
                img{
                  width: .1rem;
                  margin-left: .06rem;
                }
              }
							em{
								display: block;
								text-align: center;
								font-size: .22rem;
								color: #fff;
								margin-top: .08rem;
							}
						}
					}
				}
			}
			.user-stats{
				width: 100%;
				height: 3.2rem;
				background-image: url(../images/icon_08.png);
				background-size: 100% 100%;
				padding: .62rem .26rem 0 .2rem;
				.user-tabs{
					display: flex;
					align-items: center;
					height: .46rem;
					background-image: linear-gradient(#193c88, #0e124f);
					border-bottom: 1px solid #1d3268;
					span{
						flex: 1;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 100%;
						font-size: .14rem;
						color: #e4f0ff;
					}
				}
				.user-platforms{
					width: 100%;
					height: calc(.46rem * 4);
					.platform-item{
						width: 100%;
						height: .46rem;
						display: flex;
						align-items: center;
						background: rgba(255,255,255,0.1);
						border-bottom: 1px solid #1d3268;
						&:nth-child(even){
							background: rgba(255,255,255,0.04);
						}
						div{
							flex: 1;
							height: 100%;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: .14rem;
							color: #fff;
						}
					}
				}
			}
		}
	}
	.header{
		width: 100%;
		height: .96rem;
		background-image: url(../images/icon_01.png);
		background-size: 100% 100%;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: .24rem;
		.header-title{
			font-size: .3rem;
			letter-spacing: .06rem;
			color: #fff;
			text-shadow: 0 .06rem .04rem rgba(0,0,0,.3);
		}
		.current-time{
			font-size: .18rem;
			color: #fff;
			position: absolute;
			right: 1.38rem;
			top: .38rem;
			opacity: 0.8;
			display: flex;
			align-items: center;
			span{}
		}
		.nav-tabs{
			display: flex;
			align-items: center;
			position: absolute;
			left: .26rem;
			top: .36rem;
			li{
				font-size: .18rem;
				color: #fff;
				margin-right: .4rem;
				opacity: 0.8;
				cursor: pointer;
				&.active{
					color: #fde517;
					font-weight: bold;
					opacity: 1;
					font-size: .2rem;
					font-style: italic;
				}
			}
		}
	}
}
